<?php
header("Content-type:text/html;charset=utf-8");
include_once 'commonDB.php';
	?>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>
		</title>
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
		<link rel="stylesheet" type="text/css" href="index.css" />
		<style type="text/css">* {
	margin: 0;
	padding: 0;
	border: 0;
}

#wrap {
	width: 100%;
	height: 2800px;
}


/************************************************导航*/

#navigation {
	width: 100%;
	height: 50px;
	background-color: rgba(29, 29, 29, 1);
}

#nav {
	width: 1000px;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
}

#nav_log {
	width: 25%;
	height: 100%;
	float: left;
}

#nav_junp {
	width: 40%;
	height: 100%;
	float: left;
	overflow: hidden;
}

#nav_junp>div {
	width: 20%;
	height: 100%;
	float: left;
}

#nav_load {
	width: 35%;
	height: 100%;
	float: right;
	overflow: hidden;
}

#nav_load>div {
	width: 50%;
	height: 100%;
	float: left;
}

#grapes_hover {
	width: 100%;
	position: absolute;
	overflow: hidden;
	background-color: white;
	z-index: 3;
}

#keepout {
	width: 1000px;
	height: 200px;
	margin-left: auto;
	margin-right: auto;
	display: none;
	overflow: hidden;
}

#keepout>div {
	width: 15%;
	height: 100%;
	float: left;
	position: relative;
}

#keepout>div>a>img {
	position: absolute;
	top: 10%;
	left: 11%;
	width: 75%;
	height: 55%;
	padding: 0 20px 0 0;
	border-right: 2px solid #ccc;
}


/************************************************body*/

#body {
	width: 100%;
	height: 2695px;
}

/************************************************ 页低*/

#abyejiaoly {
	width: 100%;
	height: 220px;
	background-color: whitesmoke;
}

footer {
	width: 1000px;
	height: 100%;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
}

#footer_left {
	width: 20%;
	height: 80%;
	float: left;
	border-bottom: 1px solid #CCCCCC;
}

#footer_middle {
	width: 60%;
	height: 80%;
	float: left;
	overflow: hidden;
	border-bottom: 1px solid #CCCCCC;
}

#footer_middle>div {
	width: 20%;
	height: 100%;
	float: left;
}

#footer_right {
	width: 20%;
	height: 80%;
	float: right;
	border-bottom: 1px solid #CCCCCC;
}


/*****************body中部*/

#body-middl {
	width: 1000px;
	height: 500px;
	margin-left: auto;
	margin-right: auto;
}

#wodream {
	width: 100%;
	height: 290px;
}

#body-pictures {
	width: 2000px;
	height: 300px;
	margin-left: -500px;
	overflow: hidden;
}

#body-pictures>div {
	width: 12%;
	height: 100%;
	float: left;
}

#body-pictures>div>img {
	width: 100%;
	height: 100%;
}

#woproduct {
	width: 1000px;
	height: 400px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
}

#woproduct_pic {
	width: 600px;
	height: 150px;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
}

#wpropic_yin {
	width: 600px;
	height: 30px;
	overflow: hidden;
}


/*视频*/

#picvideo {
	width: 2000px;
	height: 600px;
}

#video_icon {
	width: 600px;
	height: 350px;
}


/*动物篇*/

#abzongmly {
	width: 1000px;
	height: 230px;
	margin-left: auto;
	margin: auto;
	overflow: hidden;
}


/*动态哦*/

#abdongtaily {
	width: 1000px;
	height: 300px;
	margin-left: auto;
	margin: auto;
	overflow: hidden;
}
/*大图滚动*/
#body_top {
	position: relative;
	top: 0;
	width: 1800px;
	height: 520px;
}
#pic_go {
	width: 20000px;
	height: 520px;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}

#pic_go>div {
	width:1800px;
	height: 520px;
	z-index: 2;
	float: left;
}
#pic_go>div>a {
	display: block;
	width: 100%;
	height: 100%;
}
#pic_go>div>a>img{
	width: 100%;
}
.swiper-pagination{
	position: absolute;
	width: 180px;
	height: 20px;
	top: 58%;
	left: 42%;
}
.swiper-pagination>span{
	margin: 5px;
}
</style>
	</head>
	<body>
		<div id="wrap">
			<!--导航-->
			<div id="navigation">
				<!--让导航居中-->
				<div id="nav">
					<!--导航logo-->
					<div id="nav_log" class="nav_log">
						<a id="navloga" href="putou.php">
							<img class="nav_log_img" src="img/nav_logo.gif" />
						</a>
					</div>
					<div id="nav_junp" class="nav_jump">
						<!--首页-->
						<div>
							<a id="first" href="putou.php">
								首页
							</a>
						</div>
						<!--葡萄产品-->
						<div>
							<a id="grapes" href="###">
								葡萄产品
							</a>
						</div>
						<!--葡萄纬度-->
						<div>
							<a id="latitude" href="latitude.php">
								葡萄纬度
							</a>
						</div>
						<!--APP下载-->
						<div>
							<a id="APPdownload" href="APP.php">
								APP下载
							</a>
						</div>
						<!--嘉年华-->
						<div>
							<a id="carnival" href="JNH.php">
								嘉年华
							</a>
						</div>
					</div>
					<div id="nav_load" class="nav_load">
						<!--登陆-->
						<div><a id="load" href="denglu.php">登陆</a></div>
						<!--注册-->
						<div><a id="registered" href="zhuce2.php">注册</a></div>
					</div>
				</div>
			</div>
			<!--隐藏-->
			<div id="grapes_hover">
				<div id="keepout">
						<?php
                         $sql = "select * from putao_chanpin order by id desc limit 6";
                         $result = mysql_query($sql);
                       while ($row =mysql_fetch_assoc($result)) {
                       ?>
                       <div><a href="<?php echo $row["href"]; ?>"><img src="<?php echo $row["scr"]; ?>"/><?php echo $row["txt"]; ?></a></div>
                    
                       <?php } ?>
				</div>
			</div>
			<!--body内容-->
			<div id="body">
				<!--body顶-->
				<div id="body_top" class="swiper-container">
					<div id="pic_go" class="swiper-wrapper">
                         <div class="swiper-slide"><a href="circuit.php" target="_Blank"><img src="http://mall.file.putaocdn.com/file/82df76ed7fc3fc6b83f3120ee6b4c205a1f17da3.jpg"/></a></div>
                         <div class="swiper-slide"><a href="sea.php" target="_Blank"><img src="http://mall.file.putaocdn.com/file/68f12a3b5d023f3471b8b2fcf62a6611d106d69f.jpg"/></a></div>
                         <div class="swiper-slide"><a href="maisisi.php" target="_Blank"><img src="http://mall.file.putaocdn.com/file/d81c08d6b5317b41e18495eaadb15c80102ac342.jpg"/></a></div>
                         <div class="swiper-slide"><a href="###"><img src="http://mall.file.putaocdn.com/file/8d3a81006810e9574cdc4b6d414738ef5764e617.jpg"/></a></div>
                         <div class="swiper-slide"><a href="circuit.php" target="_Blank"><img src="http://mall.file.putaocdn.com/file/6877e719eb65b0770475b3640f1d1f2873a6aee6.jpg"/></a></div>
                   </div>
                         <!-- Add Pagination -->
				</div>
                    <div class="swiper-pagination"></div>
				<div id="body-middl">
					<!--我们的理念-->
					<div id="wodream">
						<img src="img/shub.png" />
						<h2>
							我们的理念：科技陪伴成长
						</h2>
						<h5>
							我们尽一切可能用我们的产品带给孩子惊喜，用科技激发他探索未来。我们始终主张，父母的陪伴是童年不可或缺的精神粮食。
						</h5>
						<h5>
							成长不应只是语数外，每个孩子都值得拥有一个丰富多彩的童年。
						</h5>
						<br />
						<h6>
							We do everything possible to bring pleasant surprise to children with our products, using technology to inspire them to explore the future.
						</h6>
						<h6>
							We always advocate that parental accompaniment is indispensable spiritual nourishment, and every child deserves a colorful childhood,
						</h6>
						<h6>
							not just pursuing academic grades.
						</h6>
					</div>
					<div id="body-pictures">
						<div>
							<img src="img/xiao1.png" />
						</div>
						<div>
							<img src="img/xiao2.png" />
						</div>
						<div>
							<img src="img/xiao3.png" />
						</div>
						<div>
							<img src="img/xiao4.png" />
						</div>
						<div>
							<img src="img/xiao1.png" />
						</div>
						<div>
							<img src="img/xiao2.png" />
						</div>
						<div>
							<img src="img/xiao3.png" />
						</div>
						<div>
							<img src="img/xiao4.png" />
						</div>
					</div>
					<div id="woproduct">
						<img src="img/canpin12.png" />
						<h2>
							我们的产品
						</h2>
						<h5>
							为孩子创造不可思议的童年记忆是葡萄产品的愿景。科技创造未来，葡萄致力于为3-12岁的孩子提供奇妙的高科技玩具和应用，
						</h5>
						<h5>
							与家长分享全球最前沿的教养信息，成为儿童科技领域的引领者。
						</h5>
						<br />
						<div id="woproduct_pic">
							<div>
								<a href="###">
									<img src="img/pic2.png" />
								</a>
							</div>
							<div>
								<a href="###">
									<img src="img/pic1.png" />
							</div>
							<div>
								<a href="###">
									<img src="img/pic4.png" />
							</div>
							<div>
								<a href="###">
									<img src="img/pic3.png" />
							</div>
						</div>
						<div id="wpropic_yin">
							<div>
								葡萄纬度
							</div>
							<div>
								奇妙电脑
							</div>
							<div>
								Hello编程
							</div>
							<div>
								哈尼海洋
							</div>
						</div>
					</div>
					<!--视频-->
					<div id="picvideo">
						<br />
						<br />
						<br />
						<br />
						<div id="video_icon">
							<div>
								<img src="img/homepage.png" />
							</div>
						</div>
						<br />
						<div id="video_icon_pic">
							<productshow v-for='model in datas' :model='model'>
							</productshow>
						</div>
						<template id="product_show">
							<div :class='model.divclass'>
								<a href={{model.url}}>
									<img :class='model.imgclass' :src="model.imgurl" alt="" />
									<br />
									<p :class='model.pclass'>
										{{model.content}}
									</p>
								</a>
							</div>
						</template>
					</div>
					<div id="video" style="width:762px;height:524px;display: none">
						<div id="close">
							<h4>
								葡萄科技2016 Q1新品
							</h4>
							<div>
								X
							</div>
						</div>
						<object id="haha" type="application/x-shockwave-flash" data="http://player.youku.com/player.php/sid/XMTU3NjYxOTMxMg==/isAutoPlay/false/isShowRelatedVideo/false/partnerid/5c30db50b42ae8c4/v.swf" width="100%" height="100%" id="youku-player">
							<param name="allowFullScreen" value="true">
							<param name="allowScriptAccess" value="always">
							<param name="movie" >
						</object>
					</div>
					<br />
					<br />
					<div id="abzongmly">
						<div>
							<a href="###">
								<img src="http://mall.file.putaocdn.com/file/6fdfec872fee9952fd41f159f599fa537645c4c1.png" />
							</a>
							<p>
								葡萄科技“奇妙电路”启蒙儿童无力科学世界
							</p>
						</div>
						<div>
							<a href="###">
								<img src="http://mall.file.putaocdn.com/file/4e5f1cc19d377b8218ce8fd8a50c459aff969c55.png" />
							</a>
							<p>
								［葡萄滋小课堂］涂涂世界动物篇－－汇总帖
							</p>
						</div>
						<div>
							<a href="###">
								<img src="http://mall.file.putaocdn.com/file/ff6ddf8528001029e9fa1f4308d3ecb9a84979cb.png" />
							</a>
							<p>
								葡萄产品常用问题总帖
							</p>
						</div>
					</div>
					<div id="abdongtaily">
						<div>
							<h3>
								<a href="fuwenben.html" style="text-decoration: none; color: black;">点这里有惊喜哦</a>
							</h3>
							<ul id="homepage_new">
								<?php
$sql = "select * from message_putao order by id desc limit 5";
$result = mysql_query($sql);
while ($row =mysql_fetch_assoc($result)) {
?>
<li><a href="<?php echo $row["http"]; ?>"><?php echo $row["title"]; ?></a><span><?php echo $row["y"]; ?>-<?php echo $row["m"]; ?>-<?php echo $row["d"]; ?></span></li>
<?php } ?>
							</ul>
						</div>
						<div>
							<h3>
								<a href="fuwenben.html" style="text-decoration: none; color: black;">点这里有惊喜哦</a>
							</h3>
							<ul id="homepage_hot">
							<?php
                            $sql = "select * from message_putao2 order by id desc limit 5";
                            $result = mysql_query($sql);
                            while ($row =mysql_fetch_assoc($result)) {
                             ?>
                            <li><a href="<?php echo $row["http2"]; ?>"><?php echo $row["title2"]; ?></a><span><?php echo $row["y"]; ?>-<?php echo $row["m"]; ?>-<?php echo $row["d"]; ?></span></li>
                             <?php } ?>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<!--页低-->
			<div id="abyejiaoly">
				<footer>
					<!--页低logo-->
					<div id="footer_left">
					</div>
					<div id="footer_middle">
						<!--订单中心-->
						<div>
							<h4>
								订单中心
							</h4>
							<a href="###">
								售后政策
							</a>
							<a href="###">
								配送常见问题
							</a>
							<a href="###">
								支付方式
							</a>
							<a href="###">
								支付常见问题
							</a>
							<a href="###">
								购物指南
							</a>
						</div>
						<!--服务支持-->
						<div>
							<h4>
								服务支持
							</h4>
							<a href="###">
								配送方式
							</a>
							<a href="###">
								隐私政策
							</a>
							<a href="###">
								账户常见问题
							</a>
							<a href="###">
								淘淘向右走常见问题
							</a>
							<a href="###">
								班德瑞使用常见问题
							</a>
						</div>
						<!--商务合作-->
						<div>
							<h4>
								商务合作
							</h4>
							<a href="###">
								商务合作
							</a>
						</div>
						<!--关于葡萄-->
						<div>
							<h4>
								关于葡萄
							</h4>
							<a href="###">
								关于葡萄
							</a>
							<a href="###">
								联系我们
							</a>
						</div>
						<!--关于我们-->
						<div>
							<h4>
								关于我们
							</h4>
							<a class="qrcode" href="###">
								葡萄纬度
							</a>
						</div>
					</div>
					<!--电话-->
					<div id="footer_right">
						<a href="###">
							<img src="img/btn_consult_qq@2x.png" />
						</a>
						<a href="###">
							<h2>
								400-651-6161
							</h2>
						</a>
					</div>
					<!--ic号-->
					<h6>
						Copyright © 2016, Shanghai Putao Technology Co., Ltd. All Rights Reserved. 上海葡萄纬度科技有限公司
					</h6>
					<a href="###">
						沪IC备15015904号-3
					</a>
				</footer>
			</div>
		</div>
	</body>
	<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/swiper-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="index.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
	Vue.component('Productshow', {
	template: '#product_show',
	props: ['model']
})
var vm = new Vue({
	el: '#video_icon_pic',
	data: {
		datas: [{
			url: '###',
			imgurl: 'img/xiao2.png',
			content: '葡萄科技2016 Q1新品',
			divclass: 'divclass',
			imgclass: 'imgclass',
			pclass: 'pclass'
		}, {
			url: '###',
			imgurl: 'img/xiao6.png',
			content: '小Q大冒险续篇',
			divclass: 'divclass',
			imgclass: 'imgclass',
			pclass: 'pclass'
		}, {
			url: '###',
			imgurl: 'img/xiao5.png',
			content: '葡萄探索号60秒视频',
			divclass: 'divclass',
			imgclass: 'imgclass',
			pclass: 'pclass'
		}, {
			url: '###',
			imgurl: 'img/xiao3.png',
			content: '葡萄科技团队新',
			divclass: 'divclass',
			imgclass: 'imgclass',
			pclass: 'pclass'
		}]
	}
})
var pclass = document.querySelectorAll(".pclass");
var imgclass = document.querySelectorAll(".imgclass");
console.log(pclass)
for (var i = 0; i < imgclass.length; i++) {
	imgclass[i].index = i;
	imgclass[i].onmouseover = function() {
		pclass[this.index].style.display = "block";
	}
	pclass[i].onmouseleave = function() {
		this.style.display = "none";
	}
}

 var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: '.swiper-pagination',
       // nextButton: '.swiper-button-next',
       // prevButton: '.swiper-button-prev',
       // spaceBetween: 30,
       // centeredSlides: true,
        //slidesPerView: 1,
        paginationClickable: true,
        autoplay: 2500,
        loop:true,
        autoplayDisableOnInteraction: false
    });
    var videodivs=document.querySelectorAll("#video_icon_pic>div");
    var videoicon=document.querySelector("#video_icon");
    var haha=document.querySelector("#haha");
    videoicon.style.backgroundImage='url("http://mall.file.putaocdn.com/file/4595e99018e6c680d00cfde157d38f3496a4cd1b.jpg")'
    for (var i=0;i<videodivs.length;i++) {
    	  if (i==0) {
    	  videodivs[i].onclick=function(){
    	  	 videoicon.style.backgroundImage='url("http://mall.file.putaocdn.com/file/4595e99018e6c680d00cfde157d38f3496a4cd1b.jpg")';
    	  	 haha.data="http://player.youku.com/player.php/sid/XMTU3NjYxOTMxMg==/isAutoPlay/false/isShowRelatedVideo/false/partnerid/5c30db50b42ae8c4/v.swf";
    	    }
    	  }
    	  if (i==1) {
    	  videodivs[i].onclick=function(){
    	  videoicon.style.backgroundImage='url("http://mall.file.putaocdn.com/file/7a2a432daa9c799b7112063606653436cc135ab2.jpg")';
    	   haha.data="http://static.youku.com/v1.0.0635/v/swf/loader.swf?VideoIDS=XMTQ1MzM0MDE4OA%3D%3D&isShowRelatedVideo=false&winType=BDskin&embedid=MTgyLjIwMS4xNzIuMjUxAjM2MzMzNTA0NwIC&wd=&partnerid=5c30db50b42ae8c4&vext=pid%3D5c30db50b42ae8c4%26emb%3DMTgyLjIwMS4xNzIuMjUxAjM2MzMzNTA0NwIC%26bc%3D%26cna%3DuLldD+Hwzh8CAbbJrWw1R1+c%26type%3D0%26embsig%3D1_1467795554_78862f69ca6042027d04c49a64cba53a";
    	    }
    	  }
    	  if (i==2) {
    	  videodivs[i].onclick=function(){
    	  	 videoicon.style.backgroundImage='url("http://mall.file.putaocdn.com/file/9a8650d498ca363a322ccb493806312ab093e432.jpg")';
    	  	 haha.data="http://static.youku.com/v1.0.0635/v/swf/loader.swf?VideoIDS=XMTQyOTg4OTY2OA%3D%3D&isShowRelatedVideo=false&winType=BDskin&embedid=MTgyLjIwMS4xNzMuNTMCMzU3NDcyNDE3AgI%3D&wd=&partnerid=5c30db50b42ae8c4&vext=pid%3D5c30db50b42ae8c4%26emb%3DMTgyLjIwMS4xNzMuNTMCMzU3NDcyNDE3AgI%3D%26bc%3D%26cna%3DuLldD+Hwzh8CAbbJrWw1R1+c%26type%3D0%26embsig%3D1_1467795967_e64b0ce78587e2a5733364ae4da9ce86"; 	
    	    }
    	  }
    	  if (i==3) {
    	  videodivs[i].onclick=function(){
    	  		videoicon.style.backgroundImage='url("http://mall.file.putaocdn.com/file/5097828261c2cb0954dcecc23c3de3dd175f4c5a.jpg")';
    	  		 haha.data="http://static.youku.com/v1.0.0635/v/swf/loader.swf?VideoIDS=XMTQ1NjI5ODc2OA%3D%3D&isShowRelatedVideo=false&winType=BDskin&embedid=MTgyLjIwMS4xNzMuNTMCMzY0MDc0NjkyAgI%3D&wd=&partnerid=5c30db50b42ae8c4&vext=pid%3D5c30db50b42ae8c4%26emb%3DMTgyLjIwMS4xNzMuNTMCMzY0MDc0NjkyAgI%3D%26bc%3D%26cna%3DuLldD+Hwzh8CAbbJrWw1R1+c%26type%3D0%26embsig%3D1_1467796004_90c6e245ec4878401c190d5e86899659";
    	    }
    	  }
    }
   
</script>
</html>